<template>
  <div class="container">
    <a-form-model :model="form" ref="form" v-bind="layout" :rules="rules" >
      <a-form-model-item label="团员" prop="memberId">
          <a-select v-model="form.memberId"  placeholder="团员" >
           <a-select-option
          v-for="item in dataList"
          :value="item.id"
          :key="item.id"
          >{{ item.name }}</a-select-option
        >
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="离开机构" prop="nameFrom">
        <a-input v-model="form.nameFrom"  placeholder="离开机构" />
      </a-form-model-item>
       <a-form-model-item label="去往机构" prop="nameTo">
           <a-input v-model="form.nameTo"  placeholder="去往机构" />
      </a-form-model-item>
        <a-form-model-item label="变动类型" prop="type">
        <a-select v-model="form.type" placeholder="变动类型">
          <a-select-option :value="1"> 台内调动 </a-select-option>
          <a-select-option :value="2"> 总支部内部调动 </a-select-option>
          <a-select-option :value="3"> 台内调到台外 </a-select-option>
          <a-select-option :value="4"> 台外调入台内 </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    return {
      dataList:[],
      myList: [],
      roleList: [],
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      rules: {
        memberId: [{required: true, message: '请输入团员', trigger: 'blur'}],
        nameFrom: [{required: true, message: '请输入离开机构', trigger: 'blur'}],
        nameTo: [{required: true, message: '请输入去往机构', trigger: 'blur'}],
        type: [{required: true, message: '请输入变动类型', trigger: 'blur'}],
      },
    }
  },
  mounted() {
     this.findRoleList();
    this.searchList()
  },
  methods: {
    searchList() {
      this.$ajax({
        url: this.$api.member.findList,
        data: {},
        success: (result) => {
          this.dataList = result;
        },
      });
    },
    save() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$api.relation.saveOrUpdate,
            data: this.form,
            success: (result) => {
              this.$message.success("操作成功");
              this.$emit('pass', null);
              // this.$router.push(`/member/list`);
            },
            fail: (err) => {
              this.$message.success(err);
              this.$emit('reject', null);
            }
          });
        } else {
          this.$emit('reject', null);
        }
      });
    },
    cancel() {
      this.$router.push(`/relationship/list`);
    },
   findRoleList() {
      this.$ajax({
        url: this.$api.system.role.findRoleList,
        data: {},
        success: (result) => {
          this.roleList = result;
        },
      });
    },
    //  filteList(){
    //   if (this.myList && this.myList.length) {
    //     let myListArr = '';
    //     this.myList.map(item => {
    //       myListArr += item.role_id + ','
    //     })
    //     return this.roleList.filter(item => !myListArr.includes(item.id + ','));
    //   } else {
    //     return this.roleList;
    //   }
    // },
  }
}
</script>

<style lang="less" scoped>
  .container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
     padding: 8px 108px!important;
    .header{
      height: 56px;
      flex-grow: 0;
      display: flex;
      align-items: center;
      font-size: 1.8rem;
      padding-left: 2.4rem;
    }
    .content{
      height: auto;
      padding: 3.2rem 13.2rem;
      border-top: .1rem solid rgba(0, 0, 0, 0.1);;
      border-bottom: .1rem solid rgba(0, 0, 0, 0.1);;
    }
    .footer{
      height: 64px;
      flex-grow: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 2.4rem;
      .ant-btn {
        margin-left: 1.6rem;
      }
    }
  }
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>
